import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {DeviceEventEmitter, View} from 'react-native';
import {
  HomeContainer,
  CommunityContainer,
  MessageContainer,
  UserContainer,
  Rewardcontair,
} from './Container';
import {Image} from 'native-base';

const Tab = createBottomTabNavigator();

const MainNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        activeTintColor: '#333333',
        safeAreaInsets: 'bottom',
        labelStyle: {fontSize: 10},
        headerShown: false,
      }}>
      <Tab.Screen
        name={'Home'}
        component={HomeContainer}
        listeners={({navigation, route}) => ({
          tabPress: e => {
            // Prevent default action
            e.preventDefault();

            // Do something with the `navigation` object
            navigation.navigate('Home');
            DeviceEventEmitter.emit('action', '通知来了');
          },
        })}
        options={{
          tabBarLabel: '首页',

          tabBarIcon: ({focused}) => (
            <Image
              size="5"
              source={
                focused
                  ? require('../assets/tabber/home.png')
                  : require('../assets/tabber/homef.png')
              }
              alt="首页"
            />
          ),
        }}
      />
      <Tab.Screen
        name="Community"
        component={CommunityContainer}
        listeners={({navigation, route}) => ({
          tabPress: e => {
            // Prevent default action
            e.preventDefault();

            // Do something with the `navigation` object
            navigation.navigate('Community');
            DeviceEventEmitter.emit('Community', '通知来了');
          },
        })}
        options={{
          tabBarLabel: '商城',
          tabBarIcon: ({focused}) => (
            <Image
              size="5"
              source={
                focused
                  ? require('../assets/tabber/sc.png')
                  : require('../assets/tabber/scf.png')
              }
              alt="商城"
            />
          ),
        }}
      />
      {/* <Tab.Screen
        name="Rewardcontair"
        component={Rewardcontair}
        options={{
          tabBarLabel: '奖励中心',
          tabBarIcon: ({focused}) => (
            <Image
              size="5"
              source={
                focused
                  ? require('../assets/tabber/jl.png')
                  : require('../assets/tabber/jlf.png')
              }
              alt="奖励中心"
            />
          ),
        }}
      /> */}
      <Tab.Screen
        name="Message"
        component={MessageContainer}
        options={{
          tabBarLabel: '聊天',
          tabBarIcon: ({focused}) => (
            <Image
              size="5"
              source={
                focused
                  ? require('../assets/tabber/lt.png')
                  : require('../assets/tabber/ltf.png')
              }
              alt="聊天"
            />
          ),
        }}
      />
      <Tab.Screen
        name="User"
        component={UserContainer}
        listeners={({navigation, route}) => ({
          tabPress: e => {
            // Prevent default action
            e.preventDefault();

            // Do something with the `navigation` object
            navigation.navigate('User');
            DeviceEventEmitter.emit('User', '通知来了');
          },
        })}
        options={{
          tabBarLabel: '我的',
          tabBarIcon: ({focused}) => (
            <Image
              size="5"
              source={
                focused
                  ? require('../assets/tabber/mine.png')
                  : require('../assets/tabber/minf.png')
              }
              alt="我的"
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

const MainNavigator1 = () => {
  return <View>123哈哈哈</View>;
};

export default MainNavigator1;
